import React from 'react';
import { BorderBox1Props } from './interface';
import './index.less';

const defaultProps: BorderBox1Props = {
  children: undefined,
  style: undefined,
  cornerColor: 'rgba(2, 255, 253, 0.8)',
  cornerWidth: 15,
  backgroundColor: 'rgba(3, 2, 67, 0.5)',
  shadowColor: 'rgba(1, 69, 140, 0.5)',
};

/**
 * border box style 1
 * @author hupeng
 * @datetime 2021-1-15 10:02
 */
const BorderBox1: React.FC<BorderBox1Props> & {
  defaultProps: Partial<BorderBox1Props>;
} = props => {
  const {
    cornerColor,
    cornerWidth,
    backgroundColor,
    shadowColor,
    children,
    style,
  } = props;
  const border = `1px solid ${cornerColor}`;
  const boxShadow = `13px 13px 13px ${shadowColor} inset,-13px -13px 13px ${shadowColor} inset`;

  return (
    <div
      className="dv-border-box-1"
      style={{ backgroundColor, boxShadow, ...style }}
    >
      <div
        className="dv-border-box-1-angle dv-border-box-1-t-l"
        style={{
          width: cornerWidth,
          height: cornerWidth,
          borderTop: border,
          borderLeft: border,
        }}
      />
      <div
        className="dv-border-box-1-angle dv-border-box-1-t-r"
        style={{
          width: cornerWidth,
          height: cornerWidth,
          borderTop: border,
          borderRight: border,
        }}
      />
      <div
        className="dv-border-box-1-angle dv-border-box-1-b-l"
        style={{
          width: cornerWidth,
          height: cornerWidth,
          borderBottom: border,
          borderLeft: border,
        }}
      />
      <div
        className="dv-border-box-1-angle dv-border-box-1-b-r"
        style={{
          width: cornerWidth,
          height: cornerWidth,
          borderBottom: border,
          borderRight: border,
        }}
      />
      {children ? (
        <div className="dv-border-box-content">{children}</div>
      ) : null}
    </div>
  );
};

BorderBox1.defaultProps = defaultProps;

export default BorderBox1;
